<template>
    <el-dialog title="员工请假" v-model="AddLeaveDialogVisible" width="60%" :close-on-click-modal="false"
        :show-close="false" :close-on-press-escape="false">
        <el-form :model="leaveForm" ref="leaveFormRef" label-width="100px"
            :style="{ 'max-height': '50vh', 'overflow-y': 'auto' }">
            <el-form-item label="请假类型" :rules="[{ required: true, message: '请选择请假类型', trigger: 'blur' }]">
                <el-select v-model="leaveForm.leave_type" placeholder="请选择请假类型">
                    <el-option label="病假" value="病假"></el-option>
                    <el-option label="事假" value="事假"></el-option>
                    <el-option label="婚假" value="婚假"></el-option>
                    <el-option label="产假" value="产假"></el-option>
                    <el-option label="丧假" value="丧假"></el-option>
                    <el-option label="工伤假" value="工伤假"></el-option>
                    <el-option label="探亲假" value="探亲假"></el-option>
                    <el-option label="‌带薪年休假‌" value="‌带薪年休假‌"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="请假开始日期" :rules="[{ required: true, message: '请输入请假开始日期', trigger: 'blur' }]">
                <el-date-picker v-model="leaveForm.leave_start_date" placeholder="请选择请假开始日期"
                    type="date"></el-date-picker>
            </el-form-item>

            <el-form-item label="请假结束日期" :rules="[{ required: true, message: '请输入请假结束日期', trigger: 'blur' }]">
                <el-date-picker v-model="leaveForm.leave_end_date" placeholder="请选择请假结束日期" type="date"></el-date-picker>
            </el-form-item>
            <el-form-item label="请假原因" :rules="[{ required: true, message: '请输入请假原因', trigger: 'blur' }]">
                <el-input type="textarea" v-model="leaveForm.leave_reason" placeholder="请输入请假原因"></el-input>
            </el-form-item>
        </el-form>
        <!-- 底部按钮 -->
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancleDialog">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from "vue"
import { createData } from "../../../api/api"

const props = defineProps({
    AddLeaveDialogVisible: {
        type: Boolean,
        default: false
    },
})

const AddLeaveDialogVisible = ref(props.AddLeaveDialogVisible)
watch(() => props.AddLeaveDialogVisible, (newVal) => {
    AddLeaveDialogVisible.value = newVal
})

const emit = defineEmits<{ (event: string): void }>()
const cancleDialog = () => {
    emit("closeDialog")
}
// 员工表单数据
let leaveForm = ref(
    {
        "leave_type": null,
        "leave_start_date": null,
        "leave_end_date": null,
        "leave_reason": null,
    }
)



// 提交表单
import useAccountStore from "../../../store/account";
const accountStore = useAccountStore()

const submitForm = async () => {
    const userMsg: any = accountStore.userMsg;
    if (!userMsg) {
        alert('身份验证已过期，请重新登录');
        return;
    }
    const today = new Date();
    if (leaveForm.value.leave_type == null || leaveForm.value.leave_start_date == null || leaveForm.value.leave_end_date == null || leaveForm.value.leave_reason == null) {
        alert('请填写完整信息');
        return;
    }
    const leave_days = (new Date(leaveForm.value.leave_end_date).getTime() - new Date(leaveForm.value.leave_start_date).getTime()) / (1000 * 60 * 60 * 24);

    const data = {
        "employee_id": userMsg.employee_id,
        "leave_type": leaveForm.value.leave_type,
        "leave_start_date": formatDateToYYYYMMDD(leaveForm.value.leave_start_date),
        "leave_end_date": formatDateToYYYYMMDD(leaveForm.value.leave_end_date),
        "leave_days": leave_days,
        "leave_status": "待审",
        "leave_reason": leaveForm.value.leave_reason,
        "leave_approved_by": null
    }


    console.log("data", data);
    const res = await createData(`/leave`, data)
    emit("closeDialog")
    console.log("res", res);

};
function formatDateToYYYYMMDD(date: string) {
    if (!date) return null; // 如果没有传入日期，返回null

    const d = new Date(date); // 创建日期对象
    const year = d.getFullYear(); // 获取年份
    const month = String(d.getMonth() + 1).padStart(2, '0'); // 获取月份，并确保是两位数
    const day = String(d.getDate()).padStart(2, '0'); // 获取日期，并确保是两位数

    return `${year}-${month}-${day}`; // 返回格式化后的日期字符串
}
</script>
<style scoped lang="scss"></style>